<!--火情弹窗-->
<template>
    <el-dialog :visible.sync="isShow" title="发现火警" @closeDialog="close" class="popContainer">
        <div slot="title" class="dialog_title" :class="msgType=='huoqing'?'title_hj':msgType==='guzhang'?'title_gz':'title_yj'">
            <div :class="msgType=='huoqing'?'title_logo_hq':'title_logo_sb'"></div>
            <h2>{{fireInfo.name}}</h2>
        </div>
        <div class="content">
            <div class="left_content">
                <video :src="videoUrl"  controls="controls" autoplay width="100%" height="390px"></video>
            </div>
            <div class="right_content">
                <el-form :model="fireInfo" ref="fireInfo" label-width="100px">
                    <el-form-item label="上报人:" prop="userName">
                        <el-input v-model="fireInfo.userName" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="上报人电话:" prop="userPhone">
                        <el-input v-model="fireInfo.userPhone" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="所属主体:" prop="enterpriseName">
                        <el-input v-model="fireInfo.enterpriseName" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="预警名称:" prop="fireAlarmName">
                        <el-input v-model="fireInfo.fireAlarmName" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="所属建筑" prop="buildName">
                        <el-input v-model="fireInfo.buildName" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="详情地址:" prop="loaction">
                        <el-input v-model="fireInfo.loaction" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="确定时间:" prop="fireConfirmTime">
                        <!-- {{ fireInfo.fireConfirmTime  |dateFormat}} -->
                        <el-input v-model="fireInfo.fireConfirmTime" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="火情状态:" prop="fireExecutionStatus">
                        <!-- {{ fireInfo.fireExecutionStatus|fireStatus }} -->
                        <el-input v-model="fireInfo.fireExecutionStatus" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="结束时间:" prop="endTime">
                        <!-- {{ fireInfo.endTime | dateFormat}} -->
                        <el-input v-model="fireInfo.endTime" readonly disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="text-center" style="margin-bottom: 20px">
            <el-button size="large" type="primary" @click="openMap" style="margin-right:40px;">火情位置</el-button>
            <!-- <el-button v-if="fireInfo.fireVodie!=null" type="success" @click="openFireVodie">火情视频</el-button>
            <el-button type="success" v-if="fireInfo.inspectionVideo!=null" @click="openInspectionVideo">勘察视频</el-button> -->
            <el-button size="large" type="warning" @click="closeAudio" style="margin-right:40px;">关闭声音</el-button>
            <el-button size="large" type="success" @click="enterInfo">进入火情详情</el-button>
        </div>
        <el-dialog :title="videoTitle" :visible.sync="videoDialogVisible" width="50%">
            <video :src="videoUrl"  controls="controls" autoplay width="100%" height="450px"></video>
        </el-dialog>
        <el-dialog title="火情地图位置" :visible.sync="mapDialogVisible" width="50%">
            <baidu-map class="map-view" map-type="BMAP_NORMAL_MAP"  :center="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :zoom="15" :scroll-wheel-zoom="true">
                <bm-marker :position="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
                    <bm-label :content="'第一报警人'+fireInfo.userName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}"/>
                </bm-marker>
            </baidu-map>
        </el-dialog>
    </el-dialog>
</template>

<script>
import transferStation from "@/utils/transferStation"
export default {
    name: "fireAlarm",
    data(){
        return{
            isShow:false,
            resolve:'',
            reject:'',
            promise:null,
            videoTitle:"",
            videoUrl:"",
            videoDialogVisible:false,
            mapDialogVisible:false,
            msgType: 'huoqing'
        }
    },
    props: {
        fireInfo:{
            type: Object,
            default: function () {
                return {
                    name:"火情",
                }
            }
        }
    },
    methods:{
        closeAudio(){
            transferStation.$emit('closeAudio','关闭声音');
        },
        show(){
            if (this.fireInfo.fireVodie!=null) {
                this.videoUrl = this.fireInfo.fireVodie
                this.msgType = 'huoqing'
            } else if (this.fireInfo.inspectionVideo!=null) {
                this.videoUrl = this.fireInfo.inspectionVideo
                this.msgType = 'guzhang'
            }
            this.isShow = true;
            this.promise = new Promise((resolve, reject) => {
                this.resolve = resolve;
                this.reject = reject;
            });
            // 返回promise对象
            return this.promise;
        },
        enterInfo(){
            this.isShow = false;
            this.resolve('enterInfo');
            this.remove();
        },
        close(){
            this.closeAudio()
            this.isShow = false;
            this.reject('cancel');
            this.remove();
        },
        remove: function () {
            setTimeout(() => {
                this.destroy();
            }, 300);
        },
        destroy: function () {
            this.$destroy();
            document.body.removeChild(this.$el);
        },
        openFireVodie(){
            this.$nextTick(()=>{
                this.videoUrl = this.fireInfo.fireVodie
                this.videoTitle = "火情现场视频"
                this.videoDialogVisible = true
            })
        },
        openInspectionVideo(){
            this.$nextTick(()=>{
                this.videoUrl = this.fireInfo.inspectionVideo
                this.videoTitle = "火情勘察视频"
                this.videoDialogVisible = true
            })
        },
        openMap(){
            this.$nextTick(()=>{
                this.mapDialogVisible = true
            })
        }
    }
}
</script>

<style scoped lang="scss">
    .popContainer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999;
        .content{
            width: 100%;
            height: 48vh;
            background: #fff;
            padding: 50px 20px 20px;
            display: flex;
            .left_content {
                width: 40%;
                height: 100%;
            }
            .right_content {
                width: 60%;
                height: 100%;
                overflow: auto;
            }
        }
        .dialog_title {
            font-size: 18px;
            color: #fff;
            width: 100%;
            height: 80px;
            line-height: 80px;
            background: url('../../assets/alarm/bg_huojing.png') no-repeat;
            background-size: 102% 102%;
            background-position: -5px -1px;
            display: flex;
            .title_logo_hq {
                width: 30px;
                height: 30px;
                margin: 20px 10px 0 20px;
                background: url('../../assets/alarm/icon_huojing.png') no-repeat;
                background-size: 100% 100%;
            }
            .title_logo_sb {
                width: 30px;
                height: 30px;
                margin: 25px 5px 0 20px;
                background: url('../../assets/alarm/icon_guzhang.png') no-repeat;
                background-size: 100% 100%;
            }
        }
        .title_hj {
            background: url('../../assets/alarm/bg_huojing.png') no-repeat;
            background-size: 102% 102%;
            background-position: -5px -1px;
        }
        .title_gz {
            background: url('../../assets/alarm/bg_shebeiguzhang.png') no-repeat;
            background-size: 102% 102%;
            background-position: -5px -1px;
        }
        .title_yj {
            background: url('../../assets/alarm/bg_shebeiyujing.png') no-repeat;
            background-size: 102% 102%;
            background-position: -5px -1px;
        }
    }
    .map-view{
        width: 100%;
        height: 400px;
    }
</style>
<style lang="scss">
.popContainer {
    .el-dialog {
        width: 39%;
        .el-dialog__header {
            padding: 0;
        }
        .el-dialog__body {
            padding: 10px;
            // background: #293646;
        }
        .el-dialog__headerbtn .el-dialog__close {
            color: #ffffff;
            font-size: 24px;
        }
    }
    .el-input.is-disabled .el-input__inner {
        color: #333;
    }
}
</style>